<!doctype html>
<html style="font-size:50px;">
<head>
    <meta charset="utf-8">
    <title>幸运大转盘</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, user-scalable=no">
    <meta name="format-detection" content="telephone=no,email=no" />
    <link type="text/css" rel="stylesheet" href="../css/turntable.css" />
</head>
<body>
    <div class="body">
        <div class="head-body">
            <div class="avatar">
                <img src="../img/avatar.png" />
            </div>
            <div class="rotate-body">
                <img id="rotateBody" class="pc" src="../img/test.png" />
                <img id="plateBtn" class="rotate-btn" src="../img/rotate_btn.png" />
            </div>
        </div>
        <div class="btn-body">
            <div class="btn-border">
                <img src="../img/btn_score.png" />
                <span>会员积分 | 1000</span>
            </div>
            <div class="btn-border">
                <img src="../img/btn_prize.png" />
                <span>我的奖品 | <a  href="myPrize.html">点击查询</a></span>
            </div>
        </div>
        <table class="table-btn">
            <tr>
                <td>
                   <div class="btn-border">
                        <img src="../img/btn_score.png" />
                        <span>西门子家电积分 | 100</span>
                    </div>
                </td>
                <td>
                  <div class="btn-border">
                        <img src="../img/btn_prize.png" />
                        <span>我的奖品 | <a href="myPrize.html">点击查询</a></span>
                    </div>
                </td>
            </tr>
        </table>
        <div class="article-body">
            <article>
                <h6>奖品设置</h6>
                <p>一等奖：德国WMF单锅</p>
                <p>一等奖：德国WMF单锅</p>
                <p>一等奖：德国WMF单锅</p>
                <p>一等奖：德国WMF单锅</p>
                <p>一等奖：德国WMF单锅</p>

                <p class="beizhu" style="padding-top:9pt;color:#b3661c">注：免单大奖需要在抽奖活动时间（7月1日-10月31日）在本店至少发生过一次购买行为，抽中免单奖后将免除一单购买费用，价值不超过4999元。</p>

                <h6 style="padding-top:16pt;">活动说明</h6>
                <p>活动时间：2017.7.1-2017.10.31</p>
                <p>抽奖条件：在活动期间完善个人信息后获得一次抽奖机会</p>
            </article>
        </div>
        <footer>
            回到首页
        </footer>
        
        <script type="text/javascript" src="../jquery.min.js"></script>
        <script type="text/javascript"  src="../jquery.rotate.min.js"></script>
        <script type="text/javascript">
            var $plateBtn = $('#plateBtn');
            var $result = $('#result');
            var $rotateBody = $('#rotateBody');
            var $resultBtn = $('#resultBtn');
 
            $plateBtn.click(function(){
                var data = [0, 1, 2, 3, 4, 5, 6, 7];
                data = data[Math.floor(Math.random()*data.length)];
                switch(data){
                        case 1: 
                            rotateFunc(1,157,'恭喜你中了 <em>一等奖</em>');
                            break;
                        case 2: 
                            rotateFunc(2,65,'恭喜你中了 <em>二等奖</em>');
                            break;
                        case 3: 
                            rotateFunc(3,335,'恭喜你中了 <em>三等奖</em>');
                            break;
                        case 4: 
                            rotateFunc(4,247,'恭喜你中了 <em>四等奖</em>');
                            break;
                        case 5: 
                            rotateFunc(5,114,'谢谢参与，请再接再厉');
                            break;
                        case 6: 
                            rotateFunc(6,24,'谢谢参与，请再接再厉');
                            break;
                        case 7: 
                            rotateFunc(7,292,'谢谢参与，请再接再厉');
                            break;
                        default:
                            rotateFunc(0,203,'恭喜你中了 <em>参与奖</em>');
                    }
                });
             
                var rotateFunc = function(awards,angle,text){  //awards:奖项，angle:奖项对应的角度
                    $rotateBody.stopRotate();
                    $rotateBody.rotate({
                        angle: 0,
                        duration: 5000,
                        animateTo: angle + 1440,  //angle是图片上各奖项对应的角度，1440是让指针固定旋转4圈
                        callback: function(){
                            $resultTxt.html(text);
                            $result.show();
                        }
                    });
                };
             
                $resultBtn.click(function(){
                    $result.hide();
                });
                        
        </script>
    </div>
</body>